<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>JS的AJAX</title>
<style>
table, tr, td {
        		border: 1px solid #000;
        		border-collapse: collapse;
        	}
        	table {
        		width: 400px;
        	}
        	td {
        		height: 25px;
        	}
</style>
</head>
<body>
<div>
	<button id="getUser" onclick="allTypeOfTwo();">获得所有已生效的用户</button>
	<table id="user-table-ajax">
		<thead>
			<tr>
				<th>序号</th>
				<th>账户</th>
				<th>姓名</th>
				<th>isValid</th>
			</tr>
		</thead>
		<tbody>
			<tr></tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	function allTypeOfTwo(){
		$.ajax({
			url:"${pageContext.request.contextPath}/huangyan/list",
			contentType: "application/json; charset=utf-8",
			method:'',
			data:{"isValid":1},
			dataType:'json',
			complate:  function(XMLHttpRequest){
				alert("准备就绪");
			},
			success:function(data){debugger
				//var list = data.rows;
	    		
				for(var i=0;i<data.length;i++){
					var newtr=document.createElement("tr");
		    		
		    		var td1=document.createElement("td");
		    		td1.innerText=data[i].id;
		    		var td2=document.createElement("td");
		    		td2.innerText=data[i].userAccount;
		    		var td3=document.createElement("td");
		    		td3.innerText=data[i].userName;
		    		var td4=document.createElement("td");
		    		td4.innerText=data[i].validFlag;
		    		newtr.appendChild(td1);
		    		newtr.appendChild(td2);
		    		newtr.appendChild(td3);
		    		newtr.appendChild(td4);
		    		
		    		var tb=document.getElementsByTagName("tbody").item(0);
		    		tb.insertBefore(newtr,tb.firstElementChild);
		    		
		    		$("#getUser").attr("disabled",true)
				} 
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert("出错了");
			}
		});
	}
</script>
</body>
</html>